import React, { useState, useEffect } from 'react'
import { Table, Switch, Button, Drawer, message, Modal } from 'antd'
import { getCates, updateCate as _updateCate } from '@/api/cate';
import SearchBar from '@/components/SearchBar';
import CateAdd from './components/CateAdd';
import CateUpdate from './components/CateUpdate';
import { useNavigate } from 'react-router-dom';
export default function CateLists() {
  const navigate = useNavigate();
  // 商品列表数据
  const [cates, setCates] = useState<any[]>([])
  // 搜索字段
  let searchParams = {
    key: '',
    start: '',
    end: ''
  }
  const fetchCates = () => {
    getCates({
      ...searchParams
    }).then(res => {
      if (res.data.code === 200) {
        setCates(res.data.data)
      }
    })
  }
  const columns = [
    {
      title: '分类名',
      dataIndex: 'cateName',
      key: 'cateName',
    },
    {
      title: '分类图标',
      dataIndex: 'cateIcon',
      render: (icon: string) => {
        return <img src={icon} width={50} alt="" />
      },
      key: 'cateIcon'
    },
    {
      title: '是否启用',
      dataIndex: 'enable',
      render: (enable: boolean, row: any) => {
        return (
          <Switch checked={enable} checkedChildren="启用" unCheckedChildren="禁用" onChange={
            (checked) => {
              switchCateEnable(row.id, checked)
            }
          } />
        )
      },
      key: 'enable',
    },
    {
      title: '操作',
      render: (row: any) => {
        return (
          <>
            <Button onClick={
              () => {
                updateCate(row.id)
              }
            } type='primary'>编辑</Button>
            <Button onClick={
              () => {
                delCate(row.id)
              }
            } danger type='primary'>删除</Button>
          </>
        )
      },
      key: 'action'
    }
  ];
  // 删除商品
  const delCate = (id: number) => {
    Modal.confirm({
      title: '删除',
      content: '确定删除吗?',
      onOk: () => {
        alert('在这里调用删除api'+id)
      }
    })
  }
  // 行内修改 分类启用状态
  const switchCateEnable = (id: number, enable: boolean) => {
    _updateCate({
      cateId: id,
      enable: enable
    }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          navigate(0)
        })
      }
    })

  }
  // 点击搜索
  const onSearch = (params: { key: string, start: string, end: string }) => {
    searchParams = params;
    fetchCates();

  }

  // 增加商品弹窗
  const [cateAddShow, setCateAddShow] = useState(false)
  // 修改商品弹窗
  // 点击编辑弹出修改商品弹窗
  const updateCate = (id: number) => {
    setCateId(id);
    setCateUpdateShow(true);
  }
  const [cateId, setCateId] = useState(-1);
  const [cateUpdateShow, setCateUpdateShow] = useState(false)
  useEffect(() => {
    fetchCates();
  }, [])
  return (
    <div>
      <SearchBar onSearch={onSearch} />
      <Button type='primary' onClick={
        () => {
          setCateAddShow(true)
        }
      }>增加商品分类</Button>
      <Table dataSource={cates} columns={columns} rowKey="id" pagination={false} />
      {/* 增加商品弹窗 */}
      <Drawer
        title="增加商品"
        placement="right"
        closable={true}
        onClose={() => {
          setCateAddShow(false)
        }}
        open={cateAddShow}
        key='addCate'
      >
        <CateAdd cates={cates}/>
      </Drawer>
      {/* / 增加商品弹窗*/}
      {/* 修改商品弹窗 */}
      <Drawer
        title="修改商品商品"
        placement="right"
        closable={true}
        onClose={() => {
          setCateUpdateShow(false)
        }}
        open={cateUpdateShow}
        key='updateCate'
      >
        <CateUpdate cates={cates} cateId = {cateId}/>
      </Drawer>
      {/* / 修改商品弹窗*/}
    </div>
  )
}
